<template>
  <div>
    <h2>自定义指令</h2>
    <h3 v-color="color">这是内容</h3>
    <button @click="fn()">修改字体颜色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
    };
  },
  methods: {
    fn() {
      this.color = '#087';
    },
  },
  directives: {
    color: {
      //当被绑定的元素插到父节点时
      inserted(el, binding) {
        console.log(el);
        console.log(binding);
        el.style.color = binding.value;
      },
      //元素更新时
      update(el, binding) {
        //console.log(binding);
        el.style.color = binding.value;
      },
      // //组件更新完
      // componentUpdated(el, binding) {
      //   el.style.color = binding.value;
      // },
    },
  },
};
</script>
